<template>
  <span class="card-num">
    <span class="num-list" v-for="(item, index) in showNumber " :key="index">
      <span class="num-list-item" ref="numberDom">0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</span>
    </span>
  </span>
</template>

<script>
export default {
  name: 'number-scroll',
  props: {
    number: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      showNumber: [],
      timeTick: null
    }
  },
  watch: {
    number: {
      handler: 'changeNumber',
      immediate: true
    }
  },
  mounted () {
    this.changeNumber()
  },
  methods: {
    // 设置数字变化
    changeNumber () {
      this.showNumber = (this.number + '').split('')
      const domItems = this.$refs.numberDom
      if (domItems && domItems.length > 0) {
        let self = this
        setTimeout(() => {
          domItems.map((item, index) => {
            item.style.transform = `translate(-50%, -${Number(self.showNumber[index]) * 10}%)`
          })
        }, 200)
      }
    }
  }
}
</script>

<style scoped>
.card-num {
  font-weight: 600;
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  vertical-align: text-top;
  font-size: 1.15rem /* 20/16 */;
}

.num-list {
  display: inline-flex;
  line-height: 1;
  height: 1em;
  position: relative;
  width: 0.6em;
  justify-content: center;
  align-items: baseline;
  position: relative;
  overflow: hidden;
  flex-direction: row;
}

.num-list-item {
  z-index: 3;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  transition: transform 2s;
  display: inline-block;
  width: 100%;
}

</style>
